<template>
  <header>
    <nav>
      <div class="logo"><a href="">{{title}}</a></div>
      <ul v-for="item in reverseMenu">
        <li><a href="">{{item}}</a></li>
      </ul>
    </nav>
    <div id="banner">
      <div class="inner">
        <div class="hr"></div>
        <h1>{{title}}</h1>
        <div class="hr"></div>
        <p>welcome to my blog</p>
        <button>了解我</button>
        <div class="more">更多</div>
        <br/>
        <img src="../assets/images/arrow.png"/>
      </div>
    </div>
  </header>
</template>

<script>
  export default {
    name: "MoolngHeader",
    computed: {
      title() {
        return this.$moolngutils.WEB_TITLE;
      },
      reverseMenu() {
        return this.$moolngutils.WEB_MENU.reverse();
      }
    }
  }
</script>

<style scoped>

</style>
